<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>图表基础组件 | MyUI 4.x</title>
    <meta name="generator" content="VuePress 1.5.4">
    <link rel="icon" href="/my/favicon.ico">
    <script>
      var _hmt = _hmt || [];
      (function() {
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?c4e5f73318b5cb0c389e3d9a05f831cc";
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);
      })();
    </script>
    <meta name="description" content="MyUI是美亚柏科旗下新德汇出品的Web前端一站式项目工程框架，专注于公检法行业中台系统快速搭建，框架已在多个项目实战检验。">
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Expires" content="0">
    <link rel="preload" href="/my/assets/css/0.styles.810d4cba.css" as="style"><link rel="preload" href="/my/assets/js/app.2dbd0b81.js" as="script"><link rel="preload" href="/my/assets/js/493.009afff8.js" as="script"><link rel="preload" href="/my/assets/js/1364.041d29a9.js" as="script"><link rel="preload" href="/my/assets/js/1031.8d6cd2c9.js" as="script">
    <link rel="stylesheet" href="/my/assets/css/0.styles.810d4cba.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/my/" class="home-link router-link-active"><img src="/my/img/logo.png" alt="MyUI 4.x" class="logo"> <span class="site-name can-hide">MyUI 4.x</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/my/guide/" class="nav-link">
  指南
</a></div><div class="nav-item"><a href="/my/ui/components/" class="nav-link">
  组件
</a></div><div class="nav-item"><a href="/my/ui/charts/" class="nav-link router-link-active">
  图表
</a></div><div class="nav-item"><a href="/my/ui/map/" class="nav-link">
  地图
</a></div><div class="nav-item"><a href="/my/ui/go/" class="nav-link">
  关系图
</a></div><div class="nav-item"><a href="/my/ui/icon/" class="nav-link">
  图标
</a></div><div class="nav-item"><a href="/my/ui/pages/" class="nav-link">
  页面
</a></div><div class="nav-item"><a href="http://newgateway.gitee.io/my-web/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  演示
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="JSDoc" class="dropdown-title"><span class="title">JSDoc</span> <span class="arrow down"></span></button> <button type="button" aria-label="JSDoc" class="mobile-dropdown-title"><span class="title">JSDoc</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/my/api/components.html" class="nav-link">
  基础组件
</a></li><li class="dropdown-item"><!----> <a href="/my/api/utils.html" class="nav-link">
  工具函数
</a></li><li class="dropdown-item"><!----> <a href="/my/api/charts.html" class="nav-link">
  图表组件
</a></li><li class="dropdown-item"><!----> <a href="/my/api/map.html" class="nav-link">
  地图组件
</a></li></ul></div></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/my/guide/" class="nav-link">
  指南
</a></div><div class="nav-item"><a href="/my/ui/components/" class="nav-link">
  组件
</a></div><div class="nav-item"><a href="/my/ui/charts/" class="nav-link router-link-active">
  图表
</a></div><div class="nav-item"><a href="/my/ui/map/" class="nav-link">
  地图
</a></div><div class="nav-item"><a href="/my/ui/go/" class="nav-link">
  关系图
</a></div><div class="nav-item"><a href="/my/ui/icon/" class="nav-link">
  图标
</a></div><div class="nav-item"><a href="/my/ui/pages/" class="nav-link">
  页面
</a></div><div class="nav-item"><a href="http://newgateway.gitee.io/my-web/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  演示
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="JSDoc" class="dropdown-title"><span class="title">JSDoc</span> <span class="arrow down"></span></button> <button type="button" aria-label="JSDoc" class="mobile-dropdown-title"><span class="title">JSDoc</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/my/api/components.html" class="nav-link">
  基础组件
</a></li><li class="dropdown-item"><!----> <a href="/my/api/utils.html" class="nav-link">
  工具函数
</a></li><li class="dropdown-item"><!----> <a href="/my/api/charts.html" class="nav-link">
  图表组件
</a></li><li class="dropdown-item"><!----> <a href="/my/api/map.html" class="nav-link">
  地图组件
</a></li></ul></div></div> <!----></nav>  <ul class="sidebar-links"><li><a href="/my/ui/charts/" aria-current="page" class="sidebar-link">概念和原理</a></li><li><a href="/my/ui/charts/chart.html" aria-current="page" class="active sidebar-link">图表基础组件</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/my/ui/charts/chart.html#通用参数" class="sidebar-link">通用参数</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/my/ui/charts/chart.html#尺寸相关" class="sidebar-link">尺寸相关</a></li><li class="sidebar-sub-header"><a href="/my/ui/charts/chart.html#主题风格" class="sidebar-link">主题风格</a></li><li class="sidebar-sub-header"><a href="/my/ui/charts/chart.html#显示加载动画" class="sidebar-link">显示加载动画</a></li><li class="sidebar-sub-header"><a href="/my/ui/charts/chart.html#扩展echarts选项" class="sidebar-link">扩展ECharts选项</a></li><li class="sidebar-sub-header"><a href="/my/ui/charts/chart.html#开发辅助" class="sidebar-link">开发辅助</a></li></ul></li><li class="sidebar-sub-header"><a href="/my/ui/charts/chart.html#指标和维度" class="sidebar-link">指标和维度</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/my/ui/charts/chart.html#columns" class="sidebar-link">columns</a></li><li class="sidebar-sub-header"><a href="/my/ui/charts/chart.html#rows" class="sidebar-link">rows</a></li></ul></li><li class="sidebar-sub-header"><a href="/my/ui/charts/chart.html#图表组件私有参数" class="sidebar-link">图表组件私有参数</a></li><li class="sidebar-sub-header"><a href="/my/ui/charts/chart.html#扩展参数" class="sidebar-link">扩展参数</a></li></ul></li><li><a href="/my/ui/charts/line.html" class="sidebar-link">折线图</a></li><li><a href="/my/ui/charts/bar.html" class="sidebar-link">柱状图</a></li><li><a href="/my/ui/charts/pie.html" class="sidebar-link">饼图</a></li><li><a href="/my/ui/charts/map.html" class="sidebar-link">地图</a></li><li><a href="/my/ui/charts/radar.html" class="sidebar-link">雷达图</a></li><li><a href="/my/ui/charts/cloud.html" class="sidebar-link">标签云</a></li><li><a href="/my/ui/charts/fill.html" class="sidebar-link">填充图</a></li><li><a href="/my/ui/charts/gl.html" class="sidebar-link">GL 3D图表</a></li><li><a href="/my/ui/charts/geojson.html" class="sidebar-link">GeoJson</a></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="图表基础组件"><a href="#图表基础组件" class="header-anchor">#</a> 图表基础组件</h1> <p><code>my-chart</code> 是封装ECharts的Vue组件，所有图表都是基于<code>my-chart</code>进行扩展。</p> <h2 id="通用参数"><a href="#通用参数" class="header-anchor">#</a> 通用参数</h2> <h3 id="尺寸相关"><a href="#尺寸相关" class="header-anchor">#</a> 尺寸相关</h3> <p>与尺寸相关的有以下3个参数：</p> <h4 id="width"><a href="#width" class="header-anchor">#</a> width</h4> <p>设置图表宽度，默认100%， 支持像素和百分比单位</p> <h4 id="height"><a href="#height" class="header-anchor">#</a> height</h4> <p>设置图表高度，默认400px， 支持像素和百分比单位</p> <!----><h4 id="fit"><a href="#fit" class="header-anchor">#</a> fit</h4> <p>自动适应父容器尺寸</p> <!----><h3 id="主题风格"><a href="#主题风格" class="header-anchor">#</a> 主题风格</h3> <p>通过设置 <code>theme</code> 指定主题风格，内置了两套风格: 默认<code>light</code>，<code>dark</code></p> <p><code>theme</code> 支持设置对象形式</p> <!----><h3 id="显示加载动画"><a href="#显示加载动画" class="header-anchor">#</a> 显示加载动画</h3> <p>可设置<code>loading</code>显示加载中提示</p> <!----><h3 id="扩展echarts选项"><a href="#扩展echarts选项" class="header-anchor">#</a> 扩展ECharts选项</h3> <p>通过 <code>extend</code> 设置 ECharts 的 option</p> <!----><h3 id="开发辅助"><a href="#开发辅助" class="header-anchor">#</a> 开发辅助</h3> <p>通过设置<code>debug打印</code>ECharts<code>的</code>option` 校验参数传递是否正确</p> <!----><h2 id="指标和维度"><a href="#指标和维度" class="header-anchor">#</a> 指标和维度</h2> <p>数据由指标和维度组成。以一组常见的数据为例：</p> <table><thead><tr><th>日期</th> <th>访问用户</th> <th>下单用户</th></tr></thead> <tbody><tr><td>2018-05-22</td> <td>32371</td> <td>29810</td></tr> <tr><td>2018-05-23</td> <td>12328</td> <td>11398</td></tr> <tr><td>2018-05-24</td> <td>92381</td> <td>82910</td></tr></tbody></table> <p>“维度” 指的是数据的属性，例如表格中的 “日期” 维度，表示生成的每组数据的日期。</p> <p>“指标” 是量化衡量标准，例如表格中的 “访问用户” 和 “下单用户”。</p> <p>图表的组件用 <code>data</code> 属性数据格式如下所示：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token punctuation">{</span>
  columns<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'日期'</span><span class="token punctuation">,</span> <span class="token string">'访问用户'</span><span class="token punctuation">,</span> <span class="token string">'下单用户'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
  rows<span class="token operator">:</span> <span class="token punctuation">[</span>
    <span class="token punctuation">[</span><span class="token string">'2018-05-22'</span><span class="token punctuation">,</span> <span class="token number">32371</span><span class="token punctuation">,</span> <span class="token number">29810</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
    <span class="token punctuation">[</span><span class="token string">'2018-05-23'</span><span class="token punctuation">,</span> <span class="token number">12328</span><span class="token punctuation">,</span> <span class="token number">11398</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
    <span class="token punctuation">[</span><span class="token string">'2018-05-24'</span><span class="token punctuation">,</span> <span class="token number">92381</span><span class="token punctuation">,</span> <span class="token number">82910</span><span class="token punctuation">]</span>
  <span class="token punctuation">]</span>
<span class="token punctuation">}</span>

</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><p><code>columns</code> 中是维度和指标的集合，大部分图表都是单维度多指标，所以默认第一个值为 维度，剩余的值为指标。</p> <p><code>rows</code> 中是数据的集合。</p> <p>以上面的这组数据为例绘制一个折线图</p> <!----><h3 id="columns"><a href="#columns" class="header-anchor">#</a> columns</h3> <p><code>columns</code>的各项可以是字符串或对象描述，如一下两者是等价的：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token punctuation">{</span>
  columns<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'日期'</span><span class="token punctuation">,</span> <span class="token string">'访问用户'</span><span class="token punctuation">,</span> <span class="token string">'下单用户'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token comment">// 字符串形式</span>
  columns<span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token comment">// 对象形式</span>
    <span class="token punctuation">{</span>
      name<span class="token operator">:</span> <span class="token string">'date'</span><span class="token punctuation">,</span>
      displayName<span class="token operator">:</span> <span class="token string">'日期'</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span>
      name<span class="token operator">:</span> <span class="token string">'vistor'</span><span class="token punctuation">,</span>
      displayName<span class="token operator">:</span> <span class="token string">'访问用户'</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span>
      name<span class="token operator">:</span> <span class="token string">'order'</span><span class="token punctuation">,</span>
      displayName<span class="token operator">:</span> <span class="token string">'访问用户'</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">]</span> 
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br></div></div><p><code>columns</code> 还支持对该列数数据进行预处理的属性设置，如：</p> <ul><li>type ：表示数据类型，通常不需要设置，echarts 会自动识别，可选值：number | ordinal | float | float | time</li> <li>unit ：表示转换数据单位，需要对数据进行转换时设置，可选值：k（千） | w（万） | p（百分比）</li> <li>precision ： 转换数据精度，保留几位小数，默认：0</li> <li>sort ：Boolean值， 表示排序，从大到小</li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token punctuation">{</span>
  columns<span class="token operator">:</span> <span class="token punctuation">[</span>
    <span class="token string">'日期'</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span>
      name<span class="token operator">:</span> <span class="token string">'vistor'</span><span class="token punctuation">,</span>
      displayName<span class="token operator">:</span> <span class="token string">'访问用户'</span><span class="token punctuation">,</span>
      type<span class="token operator">:</span> <span class="token string">'number'</span><span class="token punctuation">,</span>
      unit<span class="token operator">:</span> <span class="token string">'k'</span><span class="token punctuation">,</span>
      precision<span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span>
      sort<span class="token operator">:</span> <span class="token boolean">true</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">]</span>
<span class="token punctuation">}</span> 
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div><h3 id="rows"><a href="#rows" class="header-anchor">#</a> rows</h3> <p><code>rows</code> 中是数据的集合。 可以是一个二维数组 或 对象数组形式，以下两者也是等价的。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token punctuation">{</span>
  columns<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'日期'</span><span class="token punctuation">,</span> <span class="token string">'访问用户'</span><span class="token punctuation">,</span> <span class="token string">'下单用户'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
  rows<span class="token operator">:</span> <span class="token punctuation">[</span>
    <span class="token punctuation">[</span><span class="token string">'2018-05-22'</span><span class="token punctuation">,</span> <span class="token number">32371</span><span class="token punctuation">,</span> <span class="token number">29810</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span><span class="token string">'日期'</span><span class="token operator">:</span> <span class="token string">'2018-05-22'</span><span class="token punctuation">,</span> <span class="token string">'访问用户'</span><span class="token operator">:</span> <span class="token number">32371</span><span class="token punctuation">,</span> <span class="token string">'下单用户'</span><span class="token operator">:</span> <span class="token number">29810</span><span class="token punctuation">}</span>
  <span class="token punctuation">]</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><p>也可设置字段属性的别名。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token punctuation">{</span>
  columns<span class="token operator">:</span> <span class="token punctuation">[</span> 
    <span class="token punctuation">{</span>
      name<span class="token operator">:</span> <span class="token string">'date'</span><span class="token punctuation">,</span>
      displayName<span class="token operator">:</span> <span class="token string">'日期'</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span>
      name<span class="token operator">:</span> <span class="token string">'vistor'</span><span class="token punctuation">,</span>
      displayName<span class="token operator">:</span> <span class="token string">'访问用户'</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span>
      name<span class="token operator">:</span> <span class="token string">'order'</span><span class="token punctuation">,</span>
      displayName<span class="token operator">:</span> <span class="token string">'访问用户'</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">]</span> 
  rows<span class="token operator">:</span> <span class="token punctuation">[</span>
    <span class="token punctuation">{</span>date<span class="token operator">:</span> <span class="token string">'2018-05-22'</span><span class="token punctuation">,</span> vistor<span class="token operator">:</span> <span class="token number">32371</span><span class="token punctuation">,</span> order<span class="token operator">:</span> <span class="token number">29810</span><span class="token punctuation">}</span>
  <span class="token punctuation">]</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br></div></div><h2 id="图表组件私有参数"><a href="#图表组件私有参数" class="header-anchor">#</a> 图表组件私有参数</h2> <p>不用的图表组件都有自己的私有参数，实现了高频的需求。参数名 <code>settings</code>，是对象类型。</p> <h2 id="扩展参数"><a href="#扩展参数" class="header-anchor">#</a> 扩展参数</h2> <p>当私有参数不能满足需求时，可以通过扩展参数 <code>extend</code> 设置需要的功能。 兼容ECharts option对象。</p> <p>为了能够更方便的设置属性配置项等，可以通过extend属性实现对已配置好的内部属性进行单独的设置， extend为对象类型，对象内的属性可以是函数，也可以对象，也可以是其他类型的值</p> <ul><li>当属性为函数时，设置的是函数的返回值</li> <li>当属性为对象时，如果在options中对应的属性为对象(eg: tooltip)或包含对象的数组(eg: series)， 对应的配置会被合并，否则将直接覆盖对应的配置</li></ul></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
      ←
      <a href="/my/ui/charts/" class="prev router-link-active">
        概念和原理
      </a></span> <span class="next"><a href="/my/ui/charts/line.html">
        折线图
      </a>
      →
    </span></p></div> </main></div><div class="global-ui"></div></div>
    <script src="/my/assets/js/app.2dbd0b81.js" defer></script><script src="/my/assets/js/493.009afff8.js" defer></script><script src="/my/assets/js/1364.041d29a9.js" defer></script><script src="/my/assets/js/1031.8d6cd2c9.js" defer></script>
  </body>
</html>
